<template>
  <div class="store-wrap">
    <storeHeader />
    <!-- start topbar -->
    <div class="topbar clearfix">
      <div class="img" :style="{background :topImage}"><a href="#"></a></div>
      <div class="topbar-container">
        <van-row>
          <van-col span="3"><van-image class="l" round width="46px" height="46px" :src="storeInfo.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'" /></van-col>
          <van-col span="18">{{ storeInfo.title || '数据过期' }}</van-col>
          <van-col span="3">
            <van-button icon="like" @click="getlike" size="mini" round  type="danger">关注</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- end topbar -->
  <van-grid>
    <van-grid-item v-for="item in category" :key="item.id" icon="photo-o" :text="item.title" @click="catrgory(item)" />
  </van-grid>
  <!-- start 商品 -->
  <div class="plank">
    <div class="plank-header">
        <div class="plick-header-title">
          推荐
        </div>
    </div>
    <div class="plank-container">
      <c-good-item :goods="recommend"></c-good-item>
    </div>
    <div class="plank-container text16 text-center" style="padding: .5rem 0 1.5rem" v-if="recommend.length == 0">
      暂无商品
    </div>
  </div>
  <!-- end 商品 -->
  <!-- start 商品 -->
  <div class="plank">
    <div class="plank-header">
        <div class="plick-header-title">
          招牌
        </div>
    </div>
    <div class="plank-container">
      <c-good-item :goods="specialty"></c-good-item>
    </div>
    <div class="plank-container text16 text-center" style="padding: .5rem 0 1.5rem" v-if="specialty.length == 0">
      暂无商品
    </div>
  </div>
  <!-- end 商品 -->
  <!-- start 商品 -->
  <div class="plank">
    <div class="plank-header">
        <div class="plick-header-title">
          热卖
        </div>
    </div>
    <div class="plank-container">
      <c-good-item :goods="hot"></c-good-item>
    </div>
    <div class="plank-container text16 text-center" style="padding: .5rem 0 1.5rem" v-if="hot.length == 0">
      暂无商品
    </div>
  </div>
  <!-- end 商品 -->
  <!-- start 商品 -->
  <div class="plank">
    <div class="plank-header">
        <div class="plick-header-title">
          折扣
        </div>
    </div>
    <div class="plank-container">
      <c-good-item :goods="discount"></c-good-item>
    </div>
    <div class="plank-container text16 text-center" style="padding: .5rem 0 1.5rem" v-if="discount.length == 0">
      暂无商品
    </div>
  </div>
  <!-- end 商品 -->
    <van-dialog
    v-model="store_ad"
    :showConfirmButton="false"
    style="background-color: transparent;"
  >
  <div style="padding:10px;"></div>
    <div class="close">
      <van-icon name="cross" size="20px" @click="store_ad = false" />
    </div>
    <div class="store_ad_image" >
      <img :src="adImage" @click="getAdGoods" />
    </div>
  </van-dialog>

  <copyRight />
  <!-- <storeFooter /> -->
  </div>
</template>

<script>
import storeHeader from '@/components/storeHeader.vue'
import copyRight from '@/components/copyright.vue'
import coupon from '@/components/coupon.vue'
import { Toast } from 'vant';
export default {
  name: 'Store',
  data(){
    return {
      recommend:[],
      hot:[],
      discount:[],
      specialty:[],
      category:[],
      userInfo: null,
      topImage:'url(http://ymshosss.oss-cn-shanghai.aliyuncs.com/NWHR5phpDJ8YIk1568188258190911.jpg)',
      value: 5,
      goods: [],
      store_ad: false,
      adImage:null,
      adGoodsInfo:null
    }
  },
  created(){
    this.storeInfo = this.global.state.productMerchant_store;
    this.userInfo = this.global.state.userInfo;
    this.getData();
  },
  methods:{
    getData(){
      let params = {};
      params.token = sessionStorage.getItem("token");
      const recommend = this.axios.get('/api/store/user/'+this.global.state.productMerchant_store.id+'/recommend',{params});
      
      const hot = this.axios.get('/api/store/user/'+this.global.state.productMerchant_store.id+'/hot',{params});

      const discount = this.axios.get('/api/store/user/'+this.global.state.productMerchant_store.id+'/discount',{params});

      const specialty =  this.axios.get('/api/store/user/'+this.global.state.productMerchant_store.id+'/specialty',{params});

      const category = this.axios.get('/api/store/manager/category/list/'+this.global.state.productMerchant_store.id,{params});

      const ad = this.axios.get('/api/store/manager/ad/layer/'+this.global.state.productMerchant_store.id,{params})
      
      recommend.then(res=>{this.recommend = res.data.data}).catch(err=>err) 
    
      hot.then(res=>{this.hot = res.data.data}).catch(err=>err)

      discount.then(res=>{this.discount = res.data.data}).catch(err=>err)

      specialty.then(res=>{ this.specialty = res.data.data }).catch(err=>err)

      category.then(res=>{this.category = res.data.data;this.$store.state.categoryListData = res.data.data}).catch(err=>err)
      
      ad.then(res=>{
        this.adImage = res.data.data.image;
        let goodsId = res.data.data.link.split('=')[1];
        this.axios.get('/api/store/user/goodInfo/'+goodsId).then(reslut=>{
          this.store_ad = true;
          this.adGoodsInfo = reslut.data.data;
          this.global.state.productMerchant_goods = reslut.data.data;
        }).catch(err=>{
          console.log(err);
        })
      }).catch(err=>{
        console.log('门店下没有广告')
      })
    },
    getAdGoods(){
      this.$router.push({path:'../product/merchant'});
    },
    getDetails(goods){
      this.global.state.productMerchant_goods = goods;
      this.global.state.productMerchant_store_id = this.storeInfo.id;
      this.$router.push({path:'../product/merchant'});
    },
    catrgory(item){
      this.$router.push({name:'storeList'})
    },
    async getlike(){
      let params = {
        id: this.storeInfo.id,
        token: sessionStorage.getItem('token')
      };
      const res = await this.axios.post('/api/store/user/favorite/create/store',params);
      Toast(res.data.message);
    }
  },
  components:{
    storeHeader,
    copyRight,
    coupon
  }
}
</script>
<style scoped>
.topbar {
  position: relative;
  height: 210px;
  width: 100%;
}
.topbar a {
  display: block;
  height: 100%;
  width: 100%;
}
.topbar .img {
  height: 100%;
  width: 100%;
  background-size: cover;
}
.topbar-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  box-sizing: border-box;
  padding: 2px 12px;
}
.topbar-container-title p {
  padding-left: 5px;
  margin: 0;
  line-height: 25px;
}
.topbar-container-title p:nth-child(1) {
  font-size: 20px;
  font-weight: 700;
}
.store-wrap {
  padding-bottom: 50px;
}
.close {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 50%;
  color: white;
}
.store_ad_image {
  max-width: 18.8462rem;
  max-height: 85vh;
  margin: 0 auto;
  background: no-repeat 100% 100%;
  overflow: hidden;
  
}
.store_ad_image img {
  margin: 10px 0;
    width: 100%
}
</style>
